<template>
  <div class="hello">
    <div ref="title" @click="updTitle">{{a}}</div>
    <div ref="title" @click="updTitle">{{b.name}}</div>
  </div>
</template>

<script setup>
// import useTitle from "@/components/updtitle";
import {onMounted, reactive, ref, watch, watchEffect} from "vue";
// const a = useTitle('授业')
const title = ref(null)
//dom执行完会进行监听ref
watchEffect(()=>{
  console.log(title.value)
},{
  flush:'post'
})
let a = ref('大黄狗')
let b = reactive({name:'dahuang',age:24,friend:{
    color:'red'
  }})
//监听字符串
watch(a,(newvalue)=>{
  console.log(newvalue)
})
//监听对象
watch(b,(newvalue)=>{
  console.log(newvalue,'返回的Proxy对象')
})
//监听对象返回普通对象
watch(()=>{
  return{...b}
},(newvalue)=>{
//此处不会深度侦听 如果需要加{deep:true, immediate:true(立即执行)}
  console.log(newvalue,'返回的普通对象')
})
//或者对象的某个参数
watch(()=>b.name,(newvalue)=>{
  console.log('返回的字符串',newvalue)
})
onMounted(()=>{
  //生命周期
  console.log('我是小黄狗')
})
function updTitle() {
  a.value='小土豆'
  b.name='大黄狗'
  b.friend.color='black'
  console.log({...b})
}
</script>
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
